<template>
  <div class="match-replays-container">
    <div class="match-header">
      <h2>羽毛球比赛回放</h2>
      <div class="match-filters">
        <select v-model="selectedTournament" @change="filterMatches">
          <option value="all">全部赛事</option>
          <option value="olympic">奥运会</option>
          <option value="worldchampionship">世锦赛</option>
          <option value="asiangames">亚运会</option>
          <option value="bwfworldtour">世界羽联巡回赛</option>
        </select>
        <select v-model="selectedCategory" @change="filterMatches">
          <option value="all">全部项目</option>
          <option value="ms">男单</option>
          <option value="ws">女单</option>
          <option value="md">男双</option>
          <option value="wd">女双</option>
          <option value="xd">混双</option>
        </select>
      </div>
    </div>

    <!-- 比赛回放列表 -->
    <div class="matches-grid">
      <div class="match-card" v-for="match in filteredMatches" :key="match.id">
        <div class="match-thumbnail">
          <img :src="match.thumbnailUrl" :alt="match.title">
          <div class="match-duration">{{ match.duration }}</div>
          <div class="match-category-badge">{{ getCategoryName(match.category) }}</div>
        </div>
        <div class="match-info">
          <h3 class="match-title">{{ match.title }}</h3>
          <div class="match-tournament">{{ getTournamentName(match.tournament) }}</div>
          <div class="match-players">
            <div class="player-team">
              <span class="player-name">{{ match.playerA }}</span>
              <span class="player-score">{{ match.scoreA }}</span>
            </div>
            <div class="vs-separator">VS</div>
            <div class="player-team">
              <span class="player-name">{{ match.playerB }}</span>
              <span class="player-score">{{ match.scoreB }}</span>
            </div>
          </div>
          <div class="match-date">比赛日期: {{ formatDate(match.date) }}</div>
          <button class="watch-btn">观看回放</button>
        </div>
      </div>
    </div>

    <div class="no-matches" v-if="filteredMatches.length === 0">
      暂无相关比赛回放
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 状态管理
const selectedTournament = ref('all');
const selectedCategory = ref('all');

// 模拟比赛数据
const matches = ref([
  {
    id: 1,
    title: '男单决赛 - 林丹 vs 李宗伟',
    tournament: 'olympic',
    category: 'ms',
    date: '2020-08-02',
    playerA: '林丹',
    playerB: '李宗伟',
    scoreA: '2',
    scoreB: '1',
    duration: '01:45:30',
    thumbnailUrl: 'https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f74b2d8928f74b4383e8d39ba9166cd6~tplv-tt-origin-web:gif.jpeg?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1751528886&x-signature=cr7LLFqQOPiFubaRVErml35pTL8%3D'
  },
  {
    id: 2,
    title: '女单半决赛 - 陈雨菲 vs 戴资颖',
    tournament: 'worldchampionship',
    category: 'ws',
    date: '2025-08-26',
    playerA: '陈雨菲',
    playerB: '戴资颖',
    scoreA: '2',
    scoreB: '0',
    duration: '01:20:15',
    thumbnailUrl: 'https://static.butiao.com/images/2024/08/22/a12cc2b67fea69fe3c6f5e99c447df98.jpg'
  },
  {
    id: 3,
    title: '男双决赛 - 李俊慧/刘雨辰 vs 吉迪恩/苏卡穆约',
    tournament: 'asiangames',
    category: 'md',
    date: '2022-10-07',
    playerA: '李俊慧/刘雨辰',
    playerB: '吉迪恩/苏卡穆约',
    scoreA: '1',
    scoreB: '2',
    duration: '01:35:40',
    thumbnailUrl: 'https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f74b2d8928f74b4383e8d39ba9166cd6~tplv-tt-origin-web:gif.jpeg?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1751528886&x-signature=cr7LLFqQOPiFubaRVErml35pTL8%3D'
  },
  {
    id: 4,
    title: '混双半决赛 - 郑思维/黄雅琼 vs 王懿律/黄东萍',
    tournament: 'bwfworldtour',
    category: 'xd',
    date: '2023-11-26',
    playerA: '郑思维/黄雅琼',
    playerB: '王懿律/黄东萍',
    scoreA: '2',
    scoreB: '1',
    duration: '01:28:25',
    thumbnailUrl: 'https://static.butiao.com/images/2024/08/22/a12cc2b67fea69fe3c6f5e99c447df98.jpg'
  },
  {
    id: 5,
    title: '女双决赛 - 陈清晨/贾一凡 vs 松本麻佑/永原和可那',
    tournament: 'worldchampionship',
    category: 'wd',
    date: '2023-08-27',
    playerA: '陈清晨/贾一凡',
    playerB: '松本麻佑/永原和可那',
    scoreA: '2',
    scoreB: '1',
    duration: '01:32:10',
    thumbnailUrl: 'https://static.butiao.com/images/2024/08/22/a12cc2b67fea69fe3c6f5e99c447df98.jpg'
  },
  {
    id: 6,
    title: '男单半决赛 - 安赛龙 vs 桃田贤斗',
    tournament: 'olympic',
    category: 'ms',
    date: '2020-07-31',
    playerA: '安赛龙',
    playerB: '桃田贤斗',
    scoreA: '2',
    scoreB: '0',
    duration: '01:15:50',
    thumbnailUrl: 'https://static.butiao.com/images/2024/08/22/a12cc2b67fea69fe3c6f5e99c447df98.jpg'
  }
]);

// 筛选比赛
const filteredMatches = computed(() => {
  return matches.value.filter(match => {
    const tournamentMatch = selectedTournament.value === 'all' || match.tournament === selectedTournament.value;
    const categoryMatch = selectedCategory.value === 'all' || match.category === selectedCategory.value;
    return tournamentMatch && categoryMatch;
  });
});

// 获取赛事名称
const getTournamentName = (tournamentValue) => {
  const tournaments = {
    'olympic': '奥运会',
    'worldchampionship': '世界锦标赛',
    'asiangames': '亚洲运动会',
    'bwfworldtour': '世界羽联巡回赛'
  };
  return tournaments[tournamentValue] || '其他赛事';
};

// 获取项目名称
const getCategoryName = (categoryValue) => {
  const categories = {
    'ms': '男单',
    'ws': '女单',
    'md': '男双',
    'wd': '女双',
    'xd': '混双'
  };
  return categories[categoryValue] || '未知项目';
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 筛选比赛
const filterMatches = () => {
  // 筛选逻辑已在computed属性中实现
};
</script>

<style scoped>
.match-replays-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 1rem;
}

.match-header h2 {
  color: #2196F3;
  margin: 0;
}

.match-filters {
  display: flex;
  gap: 1rem;
}

.match-filters select {
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}

/* 比赛回放列表 */
.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.match-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.match-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.match-thumbnail {
  position: relative;
  height: 200px;
}

.match-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.match-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.match-category-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(33, 150, 243, 0.9);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.match-info {
  padding: 1.2rem;
}

.match-title {
  color: #333;
  margin: 0 0 0.8rem 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

.match-tournament {
  color: #2196F3;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.match-players {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.player-team {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player-name {
  color: #555;
}

.player-score {
  font-weight: bold;
  color: #4CAF50;
  margin-left: 0.5rem;
}

.vs-separator {
  padding: 0 0.8rem;
  color: #999;
  font-weight: bold;
}

.match-date {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.watch-btn {
  width: 100%;
  padding: 0.6rem;
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.3s;
}

.watch-btn:hover {
  opacity: 0.9;
}

.no-matches {
  text-align: center;
  padding: 3rem;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 12px;
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .match-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .matches-grid {
    grid-template-columns: 1fr;
  }
}
</style>